<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">经验库</block>
		</cu-custom>
		
		<view class="dataContain" v-if="experienceData.length != 0">
			
			<view class="flies" v-for="item in showExperienceData" :key="item.Id">
				<view class="detailFile" @click="lookFor(item.FilePath)">
					<img :src="fileSrc" alt="" />
					<view class="fileName">{{item.FileName}}</view>
					<view class="seeBtn">查看</view>
				</view>
			</view>
			<view class="bottomTips">
				<view v-if="showMore" class="" @click="uploadMore()">
					加载更多...
				</view>
			</view>
			
		</view>
		
		<view v-else>
			暂无数据
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data(){
			return {
				pageIndex: 1,
				experienceData: [],
				showExperienceData: [],
				fileSrc: request.baseUrl1+'/Resource/Sg/filesSign.png',
				showMore: true
			}
		},
		onLoad() {
			let that = this
			that.getLibraryList(that.pageIndex)
		},
		methods: {
			getLibraryList(pageindex){
				uni.showLoading({
					title: '加载中....'
				})
				let that = this
				let opts = {
					url: 'WorkflowApi/GetFile_ExperiencelibraryList',
					method: 'get'
				}
				let data = {
					pageindex: pageindex,
					pagesize: 10,
					KeyWords: ''
				}
				request.httpTokenRequest(opts, data).then(res => {
					uni.hideLoading();
					if (res.data.code == 1) {
						that.experienceData = that.experienceData.concat(res.data.data.Data)
						that.showExperienceData = that.experienceData
						if (that.experienceData.length == res.data.data.Total) {
							that.showMore = false
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			lookFor(fliePath){
				uni.showLoading({
					title: '打开中'
				})
				uni.downloadFile({
					url: request.baseUrl1+fliePath,
					success(res){
						if (res.statusCode == 200) {
							uni.hideLoading();
							console.log('下载成功')
							let filePath = encodeURI(res.tempFilePath)
							uni.openDocument({
								filePath: encodeURI(filePath),
								showMenu: true,
								success:function(res){
									console.log('打开文档成功')
								},
								fail(e){
									uni.showToast({
										title: '文件打开失败',
										icon: 'none'
									})
									console.log('打开失败', e)
								}
							})
						} else {
							uni.hideLoading();
							console.log('下载失败')
							uni.showToast({
								title: '文件下载失败',
								icon: 'none'
							})
						}
					}
				})
			},
			uploadMore(){
				let that = this
				that.getLibraryList(++that.pageIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.dataContain{
		.flies {
			padding: 0 30rpx 30rpx;
			background-color: #fff;
			&:first-child{
				padding-top: 30rpx;
			}
			.detailFile{
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin: 15rpx 0;
				>img{
					$w: 77rpx;
					width: $w;
					height: (200/176)*$w;
				}
				.fileName{
					flex: 1;
					margin: 0 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					// 单行
					// white-space: nowrap;
					
					// 多行
					display: -webkit-box;
					-webkit-line-clamp: 2; /* 限制行数 */
					-webkit-box-orient: vertical;
				}
				.seeBtn{
					border-radius: 15rpx;
					padding: 15rpx 25rpx;
					color: #fff;
					background: linear-gradient(45deg,rgba(20,178,181,100%),rgba(43,194,161,100%));
				}
			}
		}
		.bottomTips {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0 40rpx;
		}
	}
	
</style>